<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
 </head>
 <body>
	<h1>操作元素的内容和值</h1>
	<form action="">
		用户名:<input name="uname">
					<span></span><br>
		密码:<input type="password" name="upwd">
					<span></span><br>
		<input type="submit" value="提交注册信息">
	</form>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
    //正确时，使用图片:"<img src='img/ok.png'>"
    //姓名错误时: "<img src='img/err.png'>用户名必须介于3~9位之间!"
    //密码错误时: "<img src='img/err.png'>密码必须介于6~8位之间!"
    //阻止默认行为: e.preventDefault();
		//表单提交: $(form).submit();
		var $txtName=$(":text"),$txtPwd=$(":password")
		$txtName.on("blur",function(){
			vali($(this),3,9,"用户名必须介于3~9位之间!")
		})
		function vali($txt,minlen,maxlen,errmsg){
			var val=$txt.val();
			if(val.length>=minlen&&val.length<=maxlen){
				$txt.next().html("<img src='img/ok.png'>")
				return true;
			}else{
				$txt.next().html(
					"<img src='img/err.png'>"+errmsg);
				return false;
			}
		}
		$txtPwd.on("blur",function(){
			vali($(this),6,8,"密码必须介于6~8位之间!")
		})
		$("form").on("submit",function(e){
			var rName=
				vali($txtName,3,9,"用户名必须介于3~9位之间!")
			var rPwd=
				vali($txtPwd,6,8,"密码必须介于6~8位之间!")
			if(!(rName&&rPwd))
				e.preventDefault();
		})
	</script>
 </body>
</html>
